<template>
    <t-layout class="home-container">
        <t-header>
            <div>
                <img src="../assets/heima.png" alt="">
                <span>电商后台管理系统</span>
            </div>
            <div class="logout" @click="logout">
                <LogoutIcon />
                <p>登出</p>
            </div>
        </t-header>
        <t-layout>
            <t-aside :width="collapsed ? '64px' : '200px'">
                <t-menu theme="light" width="100%" expandMutex :collapsed="collapsed">
                    <t-menu-item value="0" to="/dashboard">
                        <template #icon>
                            <t-icon name="dashboard" />
                        </template>
                        概览看板
                    </t-menu-item>
                    <t-submenu :title="item.authName" :value="item.id" v-for="item in menulist" :key="item.id">
                        <template #icon>
                            <!-- <icon name="mail" /> -->
                            <i :class="iconsObj[item.id]"></i>
                        </template>
                        <t-menu-item v-for="subItem in item.children" :key="subItem.id" :value="subItem.id"
                            :to="'/' + subItem.path">
                            <template #icon>
                                <i class="iconfont icon-menu"></i>
                            </template>
                            {{ subItem.authName }}
                        </t-menu-item>
                    </t-submenu>
                    <template #operations>
                        <t-button variant="text" shape="square">
                            <t-button variant="text" shape="square" @click.native="changeCollapsed">
                                <view-list-icon slot="icon" />
                            </t-button>
                        </t-button>
                    </template>
                </t-menu>
            </t-aside>
            <t-content>
                <!-- 路由占位符 -->
                <router-view></router-view>
            </t-content>
        </t-layout>
    </t-layout>
</template>

<script>

import { Icon, ViewListIcon, LogoutIcon } from 'tdesign-icons-vue';

export default {
    components: {
        Icon,
        ViewListIcon,
        LogoutIcon,
    },

    created() {
        this.getMenuList()
    },

    data() {
        return {
            collapsed: false,
            // 左侧菜单数据
            menulist: [],
            iconsObj: {
                '125': 'iconfont icon-user',
                '103': 'iconfont icon-tijikongjian',
                '101': 'iconfont icon-shangpin',
                '102': 'iconfont icon-danju',
                '145': 'iconfont icon-baobiao'
            },

        }
    },
    computed: {

    },
    methods: {

        // 获取所有的菜单
        async getMenuList() {
            const { data: res } = await this.$http.get('menus')
            console.log(res);
            if (res.meta.status === 200) {
                this.menulist = res.data
            } else {
                this.$message.error(res.meta.msg)
            }
        },

        // 折叠展开导航菜单
        changeCollapsed() {
            this.collapsed = !this.collapsed;
        },

        // 退出登录的操作
        logout() {
            // 清空 token
            window.sessionStorage.clear()

            // 跳转到登录页面
            this.$router.push('/login')
        },
    },


}
</script>

<style lang="less" scoped>
.home-container {
    height: 100%;

    .logout {
        margin-right: 10px;
        font-size: 12px;

        /deep/ .t-icon-logout {
            font-size: 18px;
        }

        :hover {
            cursor: pointer;
        }
    }
}

.t-layout__header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    align-items: center;
    color: #fff;
    font-size: 20px;

    >div {
        display: flex;
        align-items: center;

        span {
            margin-left: 15px;
        }
    }
}

.t-layout__sider {
    background-color: #333744;
}

.t-layout__content {
    background-color: #eaedf1;
}

.iconfont {
    margin-right: 10px;
}
</style>